<style lang="less">
@import '../../assets/style/tongxunlu.less';
</style>
<template>
	<mxq-router-layout>
		<div class="tongxunlu">
			<Head slot="header" @headerClick="headerClick($event)" :isIconShow="isIconShow">
				<div slot="headerTitle">
					通讯录
				</div>
			</Head>
			<van-search
				style="background: #fff;"
				v-if="!isDept"
				class="search"
				v-model.trim="value"
				placeholder="搜索:ETLDCS相关工作人员"
				@input="onSearch"
				@cancel="onCancel"/>
			<van-cell>
				<span slot="icon">
					<i class="iconfont icon-tongxunluzu txl_icon_01"></i>
				</span>
				<template slot="title">
					<span class="van-cell-text txl_title">ETCLDCS系统通讯录</span>
				</template>
			</van-cell>
			<!--标题 start-->
			<div class="tab_box">
				<span
					class="tab"
					@click="tabClick('all','-1')">联系人</span>
				<span
					class="tab"
					v-if="tabArr && tabArr.length>0"
					v-for="(item,index) in tabArr"
					:key="index"
					@click="tabClick(item,index)">>{{item.title}}</span>
			</div>
			<!--标题 end-->
			
			<!--初始列表 start-->
			<van-cell-group class="list" v-show="isShowList">
				<!--组织列表-->
				<van-cell
					class="list-tit"
					v-if="isDept"
					v-for="(item,index) in daptArr"
					:key="index"
					@click="deptClick(item)">
					<span slot="icon">
						<i class="iconfont icon-tongxunluzu"></i>
					</span>
					<template slot="title">
						<span class="van-cell-text">{{item.title}}</span>
					</template>
				</van-cell>
				<!--人员列表-->
				<van-cell
					v-if="!isDept"
					v-for="(item,index) in peopleArr"
					:key="index"
					@click="clickPeople(item)">
					<img slot="icon" class="icon_l"
						:src="item.icontx"/>
					<template slot="title">
						<span class="van-cell-text">{{item.realname}}</span>
					</template>
				</van-cell>
				<van-cell
					v-if="!isDept && peopleArr.length==0" style="text-align: center;">
					<template slot="title">
						<span class="van-cell-text">该组织下暂无人员</span>
					</template>
				</van-cell>
			</van-cell-group>
			<!--初始列表 end-->
			
			<!--搜索结果 start-->
			<van-cell-group class="list" v-show="isSearch">
				<van-cell
					v-if="!isDept"
					v-show="isSearch"
					v-for="(item,index) in searchList"
					:key="index"
					@click="clickPeople(item)">
					<img slot="icon" class="icon_l"
						:src="item.icontx"/>
					<template slot="title">
						<span class="van-cell-text">{{item.realname}}</span>
					</template>
				</van-cell>
				<van-cell
					v-if="!isDept && searchList.length==0" style="text-align: center;">
					<template slot="title">
						<span class="van-cell-text">没有找到"{{value}}"的搜索结果</span>
					</template>
				</van-cell>
			</van-cell-group>
			<!--搜索结果 end-->
		</div>
	</mxq-router-layout>
</template>

<script>
import Head from '@/components/head';
import icontx from '../../assets/img/index/touxiang.png';
import { callData, fileUrl } from '../../axios/axios';
import { deptTree } from '../../libs/tree';
import {
	Search,
	Cell,
    CellGroup,
} from 'vant';

export default {
    name: 'news',
    components: {
		Head,
		[Search.name]: Search,
		[Cell.name]: Cell,
        [CellGroup.name]: CellGroup
	},
	data() {
		return {
			isIconShow: false,//是否显示左侧箭头图标
			isDept: true,
			value: "",
			active: 2,
			tabArr: [],
			daptArr:[],
			daptsArr:[],
			peopleArr:[],
			searchList:[],//搜索
			isShowList:true,
			isSearch:false,
			DeptId:''//通道单位id
		}
	},
	methods: {
		// 得到组织树数据
		getDeptMeg(){
			let _this = this
			callData('/userCenter/CmDept/listCmDept', 'get', {}).then(res => {
				if(res.success){
					let data = res.data
					let ress = deptTree(data.tree,data.pid)[0],
						ress2 = deptTree(data.tree,data.pid);
						if(ress.grade == 0){
							_this.formatDept(ress.children)
							_this.daptsArr = ress.children
						}else{
							_this.formatDept(ress2)
							_this.daptsArr = ress2
						}
				}
			})
		},
		// 拿到人员数据
		getPeople(deptId){
			let _this = this
			let param = {
				realName: '',
				deptId: deptId,
				terminal: 0
			}
			_this.isDept = false
			callData('/userCenter/CmUser/commonCmUserSelector', 'get', param).then(res => {
				if(res.success){
					let data = res.data
					if(data && data.length>0){
						data.forEach((item,index) => {
							if(item.avatar){
								item.icontx = fileUrl(item.avatar)
							}else{
								item.icontx = icontx
							}
						})
					}
					 _this.peopleArr = data
				}
			})
		},
		// 人员的点击事件
		clickPeople(item){
			let query = {
				userId: item.id
			}
			this.$router.push({
				name:'tongxunlu_detail',
				query: query
			})
		},
		// 点击上面的tab
		tabClick(item,index){
			console.log(item,index)
			this.isDept = true
			this.peopleArr = []
			if(index == '-1'){
				this.daptArr = this.daptsArr
				this.tabArr = []
			}else{
				if(item.children && item.children.length>0) this.formatDept(item.children)
				this.tabArr = this.tabArr.slice(0,index+1)
			}
		},
		// 处理树数据
		formatDept(arr){
			this.daptArr = arr
		},
		// 组织的人员数据
		deptClick(item){
			if(item.children && item.children.length>0){
				this.tabArr.push(item)
				this.formatDept(item.children)
			}else{
				let deptId = item.id
				this.DeptId = deptId;
				this.tabArr.push(item)
				if(deptId) this.getPeople(deptId)
			}
		},
		//模糊搜索
		onSearch() {
			let _this = this;
			let param = {
				realName: _this.value,
				deptId: this.DeptId,
				terminal: 0 //登录设备 0:app端；1:pc;2:app+pc
			}
			console.log('param',param);
			callData('/userCenter/CmUser/commonCmUserSelector', 'get', param).then(res => {
				if(res.success){
					if(res.data){
						let searchData = res.data;
						let _this = this;
						_this.isShowList = false;
						_this.isSearch = true;
						searchData.forEach((item,index) => {
							if(item.avatar){
								item.icontx = fileUrl(item.avatar)
							}else{
								item.icontx = icontx
							}
						})
						_this.searchList = searchData;
					}
				}
			})
		},
		onCancel() {

		}
	},
	mounted() {
		this.getDeptMeg()
	}
}
</script>